<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page session="false"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Manop Service</title>
<script type="text/javascript" src="<c:url value='/resources/js/jquery-1.8.2.js' />"></script>


<script type="text/javascript">

$(document).ready(function() {

	$('#loader').hide();
	$('#show_heading').hide();
	
	$('#carBrandId_id').change(function(){
		$('#carModel_categories').fadeOut();
		$('#loader').show();
		$.post("/ManopServiceWEB/carParts/showSelectModel.html", {
			parent_id: $('#carBrandId_id').val(),
		}, function(response){
			
			setTimeout("finishAjax('carModel_categories', '"+escape(response)+"')", 400);
		});
		return false;
	});
});

function finishAjax(id, response){
  $('#loader').hide();
  $('#show_heading').show();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
} 

</script>
<script>
      function formSubmit()
      {
      	document.getElementById("frm1").submit();
      }
   </script>
<style>
.both h4 {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	font-size: 14px;
}

#carBrandId_id {
	padding: 3px;
	width: 200px;
}

#sub_category_id {
	padding: 3px;
	width: 200px;
}

.both {
	float: left;
	margin: 0 15px 0 0;
	padding: 0px;
}
</style>
</head>
<body>
	<h1>Add New Car Part</h1>
	<c:url var="carPartsUrl" value="/carParts.html" />
	<a href="${carPartsUrl}">-----Back------</a>
	<c:url var="saveUrl" value="/carParts/insert.html" />
	<form:form id="frm1" modelAttribute="carPart" method="POST"
		action="${saveUrl}" enctype="multipart/form-data">
		<table>
			<tr>
				<td><form:label path="name">Name:</form:label></td>
				<td><form:input path="name" /></td>
			</tr>
			<tr>
				<td><form:label path="detail">Detail:</form:label></td>
				<td><form:input path="detail" /></td>
			</tr>
			<tr>
				<td><form:label path="costPrice">Cost Price:</form:label></td>
				<td><form:input path="costPrice" /></td>
			</tr>
			<tr>
				<td><form:label path="salePrice">Sale Price:</form:label></td>
				<td><form:input path="salePrice" /></td>
			</tr>
			<tr>
				<td><form:label path="dateStart">Date Start:</form:label></td>
				<td><form:input path="dateStart" /></td>
			</tr>
		</table>
		<br />

		<div class="both">
			Select Car Brand: <select name="carBrandId" id="carBrandId_id">
				<option value="" selected="selected"></option>
				<c:forEach items="${carBrands}" var="carBrand">
					<option value="${carBrand.id}">${carBrand.nameEng}</option>
				</c:forEach>
			</select>
		</div>
		<div class="both">
			<div id="carModel_categories" align="center">
				<img src="<c:url value='/resources/css/images/loader.gif' />"
					style="margin-top: 8px; float: left" id="loader" alt="" />
			</div>
		</div>
		<br clear="all" />
		<br clear="all" /> 
    
    Select Car Type:
      <select name="carTypeId">
			<c:forEach items="${carTypes}" var="carType">
				<option value="${carType.id}">${carType.nameEng}</option>
			</c:forEach>
		</select>
		<br clear="all" />
		<br clear="all" />

		<form:form modelAttribute="uploadFiles">
			<fieldset>
				<legend>Upload Picture</legend>
				<p>
					<form:label for="fileData" path="fileData">File</form:label>
					<br />
					<form:input path="fileData" type="file" />
				</p>
			</fieldset>
		</form:form>
		<br clear="all" />
		<input type="button" onclick="formSubmit()" value="OK" />
	</form:form>

</body>
</html>